<template>
  <div>
    <el-breadcrumb separator="/">
    	<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    	<el-breadcrumb-item>系统管理</el-breadcrumb-item>
    	<el-breadcrumb-item>意见反馈</el-breadcrumb-item>
    </el-breadcrumb>
	<el-card>
		<el-table :data="opinionList" border stripe>
			<el-table-column label="反馈用户" prop="phone"></el-table-column>
			<el-table-column label="反馈内容" prop="content"></el-table-column>
			<el-table-column label="反馈时间" prop="createTime"></el-table-column>
			<el-table-column label="反馈设备" prop="deviceCode"></el-table-column>
			<el-table-column label="反馈版本" prop="versionCode"></el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-tag v-if="scope.row.type==1" type="success">已处理</el-tag>
					<el-tag @click="changeType(scope.row.id,scope.row.type)" v-else-if="scope.row.type==0" type="danger" class="typeClick">未处理</el-tag>
				</template>
			</el-table-column>
		</el-table>
		
		<!-- 分页 -->
		<el-pagination
		  @size-change="handleSizeChange"
		  @current-change="handleCurrentChange"
		  :current-page="pageCount"
		  :page-size="pageSize"
		  layout="total, sizes, prev, pager, next, jumper"
		  :total="total">
		</el-pagination>
		
	</el-card>
  </div>
</template>

<script>
  export default{
    data(){
		return{
			opinionList:[],
			total:0,
			pageSize:20,
			pageCount:1,
		}
	},
	created() {
		this.getList()
	},
	methods:{
		async getList(){
			const {data:res} = await this.$http.post('/opinion/list',{
				pageSize:this.pageSize,
				pageCount:this.pageCount
			})
			this.total = res.data.total
			this.opinionList = res.data.records
		},
		handleSizeChange(val) {
			// console.log(`每页 ${val} 条`);
			this.pageSize = val
			this.getList()
		},
		handleCurrentChange(val) {
			// console.log(`当前页: ${val}`);
			this.pageCount = val
			this.getList()
		},
		async changeType(id){
			const {data:res} = await this.$http.post('/opinion/updateType',{id:id,type:1})
			if(res.code!==200){
				return this.$message.error('修改失败')
			}
			this.$message.success('修改成功')
			this.getList()
		}
	}
  }
</script>

<style lang="less" scoped>
	.typeClick{
		cursor: pointer;
	}
</style>
